<html>
<head>
	<meta charset="utf-8">
	<!-- 标签页名称 -->
	<title>可视化</title>
	<!-- 引入 echarts.js -->
	{% load static %}
	<script src="../static/js/echarts.js"></script>
	<script src="../static/js/jquery-3.5.0.js"></script>
</head>
<style>
	* {
		margin: 0px;
		padding: 0px;
		background-color: #fffae8;
		text-align: center;
		font-family: "Microsoft YaHei UI", serif;
	}

	.middle {
		width: 100%;
		margin: 5px auto;
	}

	.div1 {
		height: 300px;
		width: 30%;
		margin-left: 2.5%;
		margin-top: 5px;
		float: left;
		/* 调试边框颜色，修改透明度即可 */
		border: 1px solid rgb(255, 0, 0);
	}
</style>

<body>
	<div class="middle">
		<h1 style="color: dimgrey">一级标题</h1>
		<h3 style="color: dimgrey">三级标题</h3>
		<h3 style="color: #d3cbaf">三级标题</h3>
		<h3 style="color: #d3cbaf">三级标题</h3>
		<!-- 1 -->
		<div class="div1" id="main">
			<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					title: {
						text: '评论词频',
						left: 'center'
					},
					tooltip: {},
					series: [{
						name: '频率',
						type: 'bar', //类型为字符云
						shape: 'smooth', //平滑
						gridSize: 2, //网格尺寸
						size: ['80%', '80%'],
						sizeRange: [35, 100],
						textStyle: {
							normal: {
								fontFamily: 'sans-serif',
								color: function () {
									return 'rgb(' +
										[Math.round(Math.random() * 160),
											Math.round(Math.random() * 160),
											Math.round(Math.random() * 160)
										]
										.join(',') + ')';
								}
							},
							emphasis: {
								shadowBlur: 5, //阴影距离
								shadowColor: '#333' //阴影颜色
							}
						},
						data: []
					}]
				};
				var all = [];
				//AJAX接收数据主体
				$.ajax({
					type: "get",
					url: "/comment/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							all[i] = {
								name: res[i].word,
								value: res[i].rate
							};
						}
						myChart.setOption({
							series: [{
								data: all
							}]
						});
					}
				});

				// 指定图表的配置项和数据


				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			</script>
		</div>
		<!-- 2 -->
		<div class="div1" id="pie">
			<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart1 = echarts.init(document.getElementById('pie'));

				// 指定图表的配置项和数据
				var option1 = {
					title: {
						text: '评论分数',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '分数',
						type: 'pie',
						radius: '50%',
						data: [],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				// 定义x、y轴数据数组
				var scores1 = [];
				var rates1 = [];
				var all1 = [];
				//请求后台数据
				$.ajax({
					type: "get",
					url: "/score/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							// scores1.push(res[i].score);
							// rates1.push(res[i].rate);
							all1[i] = {
								value: res[i].rate,
								name: res[i].score
							};
						}
						myChart1.setOption({
							series: [{
								name: name,
								data: all1
							}]
						});
					}
				});

				// 使用刚指定的配置项和数据显示图表。
				myChart1.setOption(option1);
			</script>
		</div>
		<!-- 3 -->
		<div class="div1" id="ndgr">
			<script type="text/javascript">
				var myChart2 = echarts.init(document.getElementById('ndgr'));
				var option2 = {
					title: {
						text: '用户等级',
						left: 'center'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [],
						type: 'line'
					}]
				};
				// var all2 = [];
				var scores2 = []
				var rates2 = []
				$.ajax({
					type: "get",
					url: "/userclient/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							scores2.push(res[i].userClient);
							rates2.push(res[i].rate);
							// all2[i] = {
							// 	value: res[i].rate,
							// 	name: res[i].userClient
							// };
						}
						myChart2.setOption({
							xAxis: {
								data: scores2
							},
							series: [{
								// 根据名字对应到相应的系列
								data: rates2
							}]
						});
					}
				});
				myChart2.setOption(option2);
			</script>
		</div>
		<div class="div1" id="date">
			<script type="text/javascript">
				var myChart3 = echarts.init(document.getElementById('date'));
				var option3 = {
					title: {
						text: '购买日期',
						left: 'center'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [],
						type: 'line'
					}]
				};
				// var all2 = [];
				var scores3 = []
				var rates3 = []
				$.ajax({
					type: "get",
					url: "/creationtime/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							scores3.push(res[i].creationTime);
							rates3.push(res[i].rate);
							// all2[i] = {
							// 	value: res[i].rate,
							// 	name: res[i].userClient
							// };
						}
						myChart3.setOption({
							dataZoom: {
								show: true,
								realtime: true,
								startValue: scores3[0], //拖拽条开始时间
								endValue: scores3[i], //拖拽条结束时间
							},
							xAxis: {
								// axisLabel:{
								// 	interval: 0
								// },
								data: scores3
							},
							series: [{
								// 根据名字对应到相应的系列
								data: rates3
							}]
						});
					}
				});
				myChart3.setOption(option3);
			</script>
		</div>
		<div class="div1" id="days">
			<script type="text/javascript">
				var myChart4 = echarts.init(document.getElementById('days'));
				var option4 = {
					title: {
						text: '收货后评论时间间隔',
						left: 'center'
					},
					xAxis: {},
					yAxis: {},
					series: [{
						symbolSize: 7,
						data: [
							[10.0, 8.04],
							[8.07, 6.95],
							[13.0, 7.58],
							[9.05, 8.81],
							[11.0, 8.33],
							[14.0, 7.66],
							[13.4, 6.81],
							[10.0, 6.33],
							[14.0, 8.96],
							[12.5, 6.82],
							[9.15, 7.2],
							[11.5, 7.2],
							[3.03, 4.23],
							[12.2, 7.83],
							[2.02, 4.47],
							[1.05, 3.33],
							[4.05, 4.96],
							[6.03, 7.24],
							[12.0, 6.26],
							[12.0, 8.84],
							[7.08, 5.82],
							[5.02, 5.68]
						],
						type: 'scatter'
					}]
				};
				var scores4 = []
				var rates4 = []
				var all4 = []
				$.ajax({
					type: "get",
					url: "/days/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							// scores3.push(res[i].days);
							// rates3.push(res[i].rate);
							all4[i] = [
								res[i].rate, res[i].days
							];
						}
						myChart4.setOption({
							dataZoom: {
								show: true,
								realtime: true,
								startValue: scores3[0], //拖拽条开始时间
								endValue: scores3[i], //拖拽条结束时间
							},
							series: [{
								// 根据名字对应到相应的系列
								data: all4
							}]
						});
					}
				});
				myChart4.setOption(option4);
			</script>
		</div>
		<div class="div1" id="integral">
			<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart9 = echarts.init(document.getElementById('integral'));

				// 指定图表的配置项和数据
				var option9 = {
					title: {
						text: 'Integral',
						left: 'center'
					},
					legend: {
						top: 'bottom'
					},
					series: [{
						name: 'Nightingale Chart',
						type: 'pie',
						radius: [30, 70],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 8
						},
						data: []
					}]
				};
				// 定义x、y轴数据数组
				var scores9 = [];
				var rates9 = [];
				var all9 = [];
				//请求后台数据
				$.ajax({
					type: "get",
					url: "/integral/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							// scores9.push(res[i].integral);
							// rates1.push(res[i].rate);
							all9[i] = {
								value: res[i].rate,
								name: res[i].integral
							};
						}
						myChart9.setOption({
							series: [{
								name: name,
								data: all9
							}]
						});
					}
				});

				// 使用刚指定的配置项和数据显示图表。
				myChart9.setOption(option9);
			</script>
		</div>
		<div class="div1" id="productsize">
			<script type="text/javascript">
				var myChart8 = echarts.init(document.getElementById('productsize'));
				var option8 = {
					title: {
						text: '商品数据',
						left: 'center'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						areaStyle: {}
					}]
				};
				var scores8 = []
				var rates8 = []
				$.ajax({
					type: "get",
					url: "/productsize/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							scores8.push(res[i].productSize);
							rates8.push(res[i].rate);
							// all2[i] = {
							// 	value: res[i].rate,
							// 	name: res[i].userClient
							// };
						}
						myChart8.setOption({
							xAxis: {
								data: scores8
							},
							series: [{
								// 根据名字对应到相应的系列
								data: rates8
							}]
						});
					}
				});
				myChart8.setOption(option8);
			</script>
		</div>
		<div class="div1" id="productcolor">
			<script type="text/javascript">
				var myChart6 = echarts.init(document.getElementById('productcolor'));
				var option6 = {
					title: {
						text: '商品颜色',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
							{
								value: 484,
								name: 'Union Ads'
							},
							{
								value: 300,
								name: 'Video Ads'
							}
						]
					}]
				};
				var scores6 = [];
				var rates6 = [];
				var all6 = [];
				//请求后台数据
				$.ajax({
					type: "get",
					url: "/productcolor/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							scores6.push(res[i].score);
							// rates1.push(res[i].rate);
							all6[i] = {
								value: res[i].rate,
								name: res[i].productColor
							};
						}
						myChart6.setOption({
							series: [{
								name: name,
								data: all6
							}]
						});
					}
				});

				// 使用刚指定的配置项和数据显示图表。
				myChart6.setOption(option6);
			</script>
		</div>
		<div class="div1" id="replycount2">
			<script type="text/javascript">
				var myChart7 = echarts.init(document.getElementById('replycount2'));
				var option7 = {
					title: {
						text: '回评时间',
						left: 'center'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						areaStyle: {}
					}]
				};
				var scores7 = []
				var rates7 = []
				$.ajax({
					type: "get",
					url: "/replycount2/list",
					contentType: "application/json",
					success: function (res) {
						console.log("=====res: =======")
						console.log(res);
						for (var i = 0; i < res.length; i++) {
							scores7.push(res[i].replyCount2);
							rates7.push(res[i].rate);
							// all2[i] = {
							// 	value: res[i].rate,
							// 	name: res[i].userClient
							// };
						}
						myChart7.setOption({
							xAxis: {
								data: scores7
							},
							series: [{
								// 根据名字对应到相应的系列
								data: rates7
							}]
						});
					}
				});
				myChart7.setOption(option7);
			</script>
		</div>
	</div>
</body>

</html>